<!--
 * @Author: dengyl
 * @Date: 2022-01-12 11:31:52
 * @LastEditTime: 2022-08-16 18:04:56
 * @LastEditors: 詹真琦(legendryztachi@gmail.com)
 * @Description: 标记
 * @FilePath: \code\ctp-static-portal-front\src\components\news\components\tag.vue
-->
<template>
  <div class="tag">
    <span v-if="value === 'topTag' || value === '置顶'" class="top"
      ><span>{{ i18n('section.column.flag.top') }}</span></span
    >
    <span v-if="value === 'focusTag' || value === '焦点'" class="focus"
      ><span>{{ i18n('section.column.flag.focus') }}</span></span
    >
    <span v-if="value === 'newTag' || value === '最新'" class="new"
      ><span>{{ i18n('section.column.flag.newest') }}</span></span
    >
  </div>
</template>

<script>
  export default {
    name: 'NewsTag',
    props: {
      value: { type: String }
    },
    methods: {
      i18n(code) {
        return $.i18n(code);
      }
    }
  };
</script>
<style scoped lang="scss">
  .tag {
    display: inline-block;
    margin-right: 5px;

    .top {
      color: red;
    }

    .focus {
      display: inline-block;
      width: 34px;
      font-size: 12px;
      line-height: 18px;
      color: #fff;
      text-align: center;
      background: #ef8a39;
      border-radius: 2px;
    }

    .new {
      display: inline-block;
      width: 34px;
      font-size: 12px;
      line-height: 18px;
      color: #fff;
      text-align: center;
      background: #288def;
      border-radius: 2px;
    }
  }
</style>
